<!DOCTYPE html>
<html>


<!--文化程度-->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 百度ECHarts</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="../favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
   <!-- <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>中国地图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="../graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="../graph_flot.html#">表格</a>
                                </li>
                                <li><a href="../graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div style="height:600px" id="map"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>扇形图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="../graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#" id="changetable">表格</a>
                                </li>
                                <li><a href="#" id="chart12">图标</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="chinachart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>扇形图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="../graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="../graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="../graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>全国残疾类别数据</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_basic.html#">选项1</a>
                                </li>
                                <li><a href="table_basic.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <table class="table">
                            <thead>
                            <tr>
                                <th>残疾类别</th>
                                <th>视力</th>
                                <th>听力</th>
                                <th>言语</th>
                                <th>肢体</th>
                                <th>智力</th>
                                <th>精神</th>
                                <th>多重</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>人数(万人)</td>
                                <td>4.9</td>
                                <td>3.4</td>
                                <td>1.6</td>
                                <td>36.1</td>
                                <td>10.5</td>
                                <td>14.3</td>
                                <td>4.5</td>
                            </tr>
                            <tr>
                                <td>占比(%)</td>
                                <td>6.5</td>
                                <td>4.5</td>
                                <td>2</td>
                                <td>48</td>
                                <td>14</td>
                                <td>19</td>
                                <td>6</td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广东省残疾类别数据</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_basic.html#">选项1</a>
                                </li>
                                <li><a href="table_basic.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <table class="table">
                            <thead>
                            <tr>
                                <th>残疾类别</th>
                                <th>视力</th>
                                <th>听力</th>
                                <th>言语</th>
                                <th>肢体</th>
                                <th>智力</th>
                                <th>精神</th>
                                <th>多重</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>人数(万人)</td>
                                <td>4.9</td>
                                <td>3.4</td>
                                <td>1.6</td>
                                <td>36.1</td>
                                <td>10.5</td>
                                <td>14.3</td>
                                <td>4.5</td>
                            </tr>
                            <tr>
                                <td>占比(%)</td>
                                <td>6.5</td>
                                <td>4.5</td>
                                <td>2</td>
                                <td>48</td>
                                <td>14</td>
                                <td>19</td>
                                <td>6</td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广东地图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="../graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="../graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="../graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div style="height:600px" id="province"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>扇形图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="../graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="../graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="../graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="chart2"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>扇形图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="../graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="../graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="../graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="chart1"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广东省残疾类别数据</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_basic.html#">选项1</a>
                                </li>
                                <li><a href="table_basic.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <table class="table">
                            <thead>
                            <tr>
                                <th>残疾类别</th>
                                <th>视力</th>
                                <th>听力</th>
                                <th>言语</th>
                                <th>肢体</th>
                                <th>智力</th>
                                <th>精神</th>
                                <th>多重</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>人数(万人)</td>
                                <td>4.9</td>
                                <td>3.4</td>
                                <td>1.6</td>
                                <td>36.1</td>
                                <td>10.5</td>
                                <td>14.3</td>
                                <td>4.5</td>
                            </tr>
                            <tr>
                                <td>占比(%)</td>
                                <td>6.5</td>
                                <td>4.5</td>
                                <td>2</td>
                                <td>48</td>
                                <td>14</td>
                                <td>19</td>
                                <td>6</td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>深圳市残疾类别数据</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_basic.html#">选项1</a>
                                </li>
                                <li><a href="table_basic.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <table class="table">
                            <thead>
                            <tr>
                                <th>残疾类别</th>
                                <th>视力</th>
                                <th>听力</th>
                                <th>言语</th>
                                <th>肢体</th>
                                <th>智力</th>
                                <th>精神</th>
                                <th>多重</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>人数(万人)</td>
                                <td>4.9</td>
                                <td>3.4</td>
                                <td>1.6</td>
                                <td>36.1</td>
                                <td>10.5</td>
                                <td>14.3</td>
                                <td>4.5</td>
                            </tr>
                            <tr>
                                <td>占比(%)</td>
                                <td>6.5</td>
                                <td>4.5</td>
                                <td>2</td>
                                <td>48</td>
                                <td>14</td>
                                <td>19</td>
                                <td>6</td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>扇形图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="../graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="../graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="../graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="chart5" style="height: 500px"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>-->
   <div class="wrapper wrapper-content animated fadeInRight">
       <div class="row">
           <div class="col-sm-12">
               <div class="tabs-container">
                   <ul class="nav nav-tabs">
                       <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 全国数据</a>
                       </li>
                       <li class=""><a data-toggle="tab" href="#tab-2" id="shengji" aria-expanded="false">省级数据</a>
                       </li>
                   </ul>
                   <div class="tab-content">
                       <div id="tab-1" class="tab-pane active">
                           <div class="row">
                               <div class="col-sm-8">
                                   <div class="ibox float-e-margins">
                                       <div class="ibox-content">
                                           <div style="height:500px" id="map"></div>
                                       </div>
                                   </div>
                               </div>
                               <div class="col-sm-4">
                                   <div class="ibox float-e-margins">

                                       <div class="ibox-content">
                                           <div class="echarts" id="chinachart"></div>
                                       </div>
                                   </div>
                               </div>
                               <div class="col-sm-4">
                                   <div class="ibox float-e-margins">

                                       <div class="ibox-content">
                                           <div class="echarts" id="chart"></div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                           <div class="row">
                               <div class="col-sm-6">
                                   <div class="ibox float-e-margins">
                                       <div class="ibox-title">
                                           <h5>全国残疾类别数据</h5>
                                           <div class="ibox-tools">
                                               <a class="collapse-link">
                                                   <i class="fa fa-chevron-up"></i>
                                               </a>
                                               <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                                                   <i class="fa fa-wrench"></i>
                                               </a>
                                               <ul class="dropdown-menu dropdown-user">
                                                   <li><a href="table_basic.html#">选项1</a>
                                                   </li>
                                                   <li><a href="table_basic.html#">选项2</a>
                                                   </li>
                                               </ul>
                                               <a class="close-link">
                                                   <i class="fa fa-times"></i>
                                               </a>
                                           </div>
                                       </div>
                                       <div class="ibox-content">

                                           <table class="table">
                                               <thead>
                                               <tr>
                                                   <th>残疾类别</th>
                                                   <th>视力</th>
                                                   <th>听力</th>
                                                   <th>言语</th>
                                                   <th>肢体</th>
                                                   <th>智力</th>
                                                   <th>精神</th>
                                                   <th>多重</th>
                                               </tr>
                                               </thead>
                                               <tbody>
                                               <tr>
                                                   <td>人数(万人)</td>
                                                   <td>4.9</td>
                                                   <td>3.4</td>
                                                   <td>1.6</td>
                                                   <td>36.1</td>
                                                   <td>10.5</td>
                                                   <td>14.3</td>
                                                   <td>4.5</td>
                                               </tr>
                                               <tr>
                                                   <td>占比(%)</td>
                                                   <td>6.5</td>
                                                   <td>4.5</td>
                                                   <td>2</td>
                                                   <td>48</td>
                                                   <td>14</td>
                                                   <td>19</td>
                                                   <td>6</td>
                                               </tr>
                                               </tbody>
                                           </table>

                                       </div>
                                   </div>
                               </div>
                               <div class="col-sm-6">
                                   <div class="ibox float-e-margins">
                                       <div class="ibox-title">
                                           <h5>广东省残疾类别数据</h5>
                                           <div class="ibox-tools">
                                               <a class="collapse-link">
                                                   <i class="fa fa-chevron-up"></i>
                                               </a>
                                               <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                                                   <i class="fa fa-wrench"></i>
                                               </a>
                                               <ul class="dropdown-menu dropdown-user">
                                                   <li><a href="table_basic.html#">选项1</a>
                                                   </li>
                                                   <li><a href="table_basic.html#">选项2</a>
                                                   </li>
                                               </ul>
                                               <a class="close-link">
                                                   <i class="fa fa-times"></i>
                                               </a>
                                           </div>
                                       </div>
                                       <div class="ibox-content">

                                           <table class="table">
                                               <thead>
                                               <tr>
                                                   <th>残疾类别</th>
                                                   <th>视力</th>
                                                   <th>听力</th>
                                                   <th>言语</th>
                                                   <th>肢体</th>
                                                   <th>智力</th>
                                                   <th>精神</th>
                                                   <th>多重</th>
                                               </tr>
                                               </thead>
                                               <tbody>
                                               <tr>
                                                   <td>人数(万人)</td>
                                                   <td>4.9</td>
                                                   <td>3.4</td>
                                                   <td>1.6</td>
                                                   <td>36.1</td>
                                                   <td>10.5</td>
                                                   <td>14.3</td>
                                                   <td>4.5</td>
                                               </tr>
                                               <tr>
                                                   <td>占比(%)</td>
                                                   <td>6.5</td>
                                                   <td>4.5</td>
                                                   <td>2</td>
                                                   <td>48</td>
                                                   <td>14</td>
                                                   <td>19</td>
                                                   <td>6</td>
                                               </tr>
                                               </tbody>
                                           </table>

                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                       <div id="tab-2" class="tab-pane">
                           <div class="row">
                               <div class="col-sm-8">
                                   <div class="ibox float-e-margins">
                                       <div class="ibox-content">
                                           <div style="height:500px" id="province"></div>
                                       </div>
                                   </div>
                               </div>

                               <div class="col-sm-4">
                                   <div class="ibox float-e-margins">
                                       <div class="ibox-content">
                                           <div class="echarts" id="chart2"></div>
                                       </div>
                                   </div>
                               </div>
                               <div class="col-sm-4">
                                   <div class="ibox float-e-margins">
                                       <div class="ibox-content">
                                           <div class="echarts" id="chart1"></div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                           <div class="row">
                               <div class="col-sm-6">
                                   <div class="ibox float-e-margins">
                                       <div class="ibox-title">
                                           <h5>广东省残疾类别数据</h5>
                                           <div class="ibox-tools">
                                               <a class="collapse-link">
                                                   <i class="fa fa-chevron-up"></i>
                                               </a>
                                               <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                                                   <i class="fa fa-wrench"></i>
                                               </a>
                                               <ul class="dropdown-menu dropdown-user">
                                                   <li><a href="table_basic.html#">选项1</a>
                                                   </li>
                                                   <li><a href="table_basic.html#">选项2</a>
                                                   </li>
                                               </ul>
                                               <a class="close-link">
                                                   <i class="fa fa-times"></i>
                                               </a>
                                           </div>
                                       </div>
                                       <div class="ibox-content">

                                           <table class="table">
                                               <thead>
                                               <tr>
                                                   <th>残疾类别</th>
                                                   <th>视力</th>
                                                   <th>听力</th>
                                                   <th>言语</th>
                                                   <th>肢体</th>
                                                   <th>智力</th>
                                                   <th>精神</th>
                                                   <th>多重</th>
                                               </tr>
                                               </thead>
                                               <tbody>
                                               <tr>
                                                   <td>人数(万人)</td>
                                                   <td>4.9</td>
                                                   <td>3.4</td>
                                                   <td>1.6</td>
                                                   <td>36.1</td>
                                                   <td>10.5</td>
                                                   <td>14.3</td>
                                                   <td>4.5</td>
                                               </tr>
                                               <tr>
                                                   <td>占比(%)</td>
                                                   <td>6.5</td>
                                                   <td>4.5</td>
                                                   <td>2</td>
                                                   <td>48</td>
                                                   <td>14</td>
                                                   <td>19</td>
                                                   <td>6</td>
                                               </tr>
                                               </tbody>
                                           </table>

                                       </div>
                                   </div>
                               </div>
                               <div class="col-sm-6">
                                   <div class="ibox float-e-margins">
                                       <div class="ibox-title">
                                           <h5>深圳市残疾类别数据</h5>
                                           <div class="ibox-tools">
                                               <a class="collapse-link">
                                                   <i class="fa fa-chevron-up"></i>
                                               </a>
                                               <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                                                   <i class="fa fa-wrench"></i>
                                               </a>
                                               <ul class="dropdown-menu dropdown-user">
                                                   <li><a href="table_basic.html#">选项1</a>
                                                   </li>
                                                   <li><a href="table_basic.html#">选项2</a>
                                                   </li>
                                               </ul>
                                               <a class="close-link">
                                                   <i class="fa fa-times"></i>
                                               </a>
                                           </div>
                                       </div>
                                       <div class="ibox-content">

                                           <table class="table">
                                               <thead>
                                               <tr>
                                                   <th>残疾类别</th>
                                                   <th>视力</th>
                                                   <th>听力</th>
                                                   <th>言语</th>
                                                   <th>肢体</th>
                                                   <th>智力</th>
                                                   <th>精神</th>
                                                   <th>多重</th>
                                               </tr>
                                               </thead>
                                               <tbody>
                                               <tr>
                                                   <td>人数(万人)</td>
                                                   <td>4.9</td>
                                                   <td>3.4</td>
                                                   <td>1.6</td>
                                                   <td>36.1</td>
                                                   <td>10.5</td>
                                                   <td>14.3</td>
                                                   <td>4.5</td>
                                               </tr>
                                               <tr>
                                                   <td>占比(%)</td>
                                                   <td>6.5</td>
                                                   <td>4.5</td>
                                                   <td>2</td>
                                                   <td>48</td>
                                                   <td>14</td>
                                                   <td>19</td>
                                                   <td>6</td>
                                               </tr>
                                               </tbody>
                                           </table>

                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.js"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <script src="js/demo/echarts-demo.min.js"></script>
    <script src="js/template.js"></script>
    <script>

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // 获取已激活的标签页的名称
            var activeTab = $(e.target)[0].hash;
            //广东省地图
            $.get('/json/guangdong.json', function (data) {
                echarts.registerMap('guangdong', data);
                var chart = echarts.init(document.getElementById('province'));
                chart.setOption({
                    series: [{
                        type: 'map',
                        map: 'guangdong'
                    }]
                });
                chart.on('click', function (params) {
                    var city = params.name;
                    qushow(city);
                });
            });

            //省级人口性别比例
            var myChart = echarts.init(document.getElementById('chart2'));
            option = {
                title: {
                    text: '广东残疾类别数据',
                    // subtext: '纯属虚构',
                    x: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: ["视力","听力","言语","肢体","智力","精神","多重"]
                },
                series: [
                    {
                        name: '残疾类别',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: 51.0, name: '视力'},
                            {value: 21.3, name: '听力'},
                            {value: 51.0, name: '言语'},
                            {value: 21.3, name: '肢体'},
                            {value: 51.0, name: '智力'},
                            {value: 21.3, name: '精神'},
                            {value: 21.3, name: '多重'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            //联动市级
            qushow('深圳');
            function qushow(city){
                var myChart = echarts.init(document.getElementById('chart1'));
                option = {
                    title: {
                        text: city+'残疾类别数据',
                        // subtext: '纯属虚构',
                        x: 'left'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        data: ["视力","听力","言语","肢体","智力","精神","多重"]
                    },
                    series: [
                        {
                            name: '残疾类别',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 51.0, name: '视力'},
                                {value: 21.3, name: '听力'},
                                {value: 51.0, name: '言语'},
                                {value: 21.3, name: '肢体'},
                                {value: 51.0, name: '智力'},
                                {value: 21.3, name: '精神'},
                                {value: 21.3, name: '多重'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

            var myChart5 = echarts.init(document.getElementById('chart5'));
            option5 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data:['已就业人数','未就业人数','就业率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['16-29','30-39','40-49','50-59','60以上'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '人数',
                        min: 0,
                        max: 20,
                        interval: 2,
                        axisLabel: {
                            formatter: '{value} 万'
                        }
                    },
                    {
                        type: 'value',
                        name: '比率',
                        min: 0,
                        max: 100,
                        interval: 10,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                grid:{
                    x:40,
                    y:45,
                    x2:50,
                    y2:20,
                    borderWidth:1,
                    height:300,
                },
                series: [
                    {
                        name:'已就业人数',
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 4.2, 2.6]
                    },
                    {
                        name:'未就业人数',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 2.4, 8.7]
                    },
                    {
                        name:'就业率',
                        type:'line',
                        yAxisIndex: 1,
                        data:[50, 20, 33, 90,80]
                    }
                ]
            };

            myChart5.setOption(option5);

        });



        //全国地图
        $.getJSON('/json/china.json', function (data) {
            echarts.registerMap('china', data);
            var chart = echarts.init(document.getElementById('map'));
            chart.setOption({
                title: {
                    text: '全国残疾人残疾类别',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },


                visualMap: {
                    min: 0,
                    max: 2500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高','低'],           // 文本，默认为数值文本
                    calculable: false
                },

                series: [
                    {
                        name: '残疾类别',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            },
                        },
                        data:[
                            {name: '北京',value: randomData() },
                            {name: '天津',value: randomData() },
                            {name: '上海',value: randomData() },
                            {name: '重庆',value: randomData() },
                            {name: '河北',value: randomData() },
                            {name: '河南',value: randomData() },
                            {name: '云南',value: randomData() },
                            {name: '辽宁',value: randomData() },
                            {name: '黑龙江',value: randomData() },
                            {name: '湖南',value: randomData() },
                            {name: '安徽',value: randomData() },
                            {name: '山东',value: randomData() },
                            {name: '新疆',value: randomData() },
                            {name: '江苏',value: randomData() },
                            {name: '浙江',value: randomData() },
                            {name: '江西',value: randomData() },
                            {name: '湖北',value: randomData() },
                            {name: '广西',value: randomData() },
                            {name: '甘肃',value: randomData() },
                            {name: '山西',value: randomData() },
                            {name: '内蒙古',value: randomData() },
                            {name: '陕西',value: randomData() },
                            {name: '吉林',value: randomData() },
                            {name: '福建',value: randomData() },
                            {name: '贵州',value: randomData() },
                            {name: '广东',value: randomData() },
                            {name: '青海',value: randomData() },
                            {name: '西藏',value: randomData() },
                            {name: '四川',value: randomData() },
                            {name: '宁夏',value: randomData() },
                            {name: '海南',value: randomData() },
                            {name: '台湾',value: randomData() },
                            {name: '香港',value: randomData() },
                            {name: '澳门',value: randomData() }
                        ]

                    }
                ]


            });
            chart.on('click', function (params) {
                var city = params.name;
                cityshow(city);
            });

        });

        //全国人口性别比例
        function quanguo() {
            var myChart6 = echarts.init(document.getElementById('chinachart'));
            option6 = {
                title: {
                    text: '全国残疾类别数据'
                },
                tooltip: {},
                /*legend: {
                 data:['残疾类别']
                 },*/
                xAxis: {
                    data: ["视力","听力","言语","肢体","智力","精神","多重"]
                },
                yAxis: {},
                series: [{
                    //name: '',
                    type: 'bar',
                    data: [4.9, 3.4, 1.6, 36.1, 10.5,14.3,4.5]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart6.setOption(option6);
        }
        quanguo();
        <!--联动省级-->
        function cityshow(city){
            var myChart = echarts.init(document.getElementById('chart'));
            option = {
                title: {
                    text: city+'残疾类别数据',
                    // subtext: '纯属虚构',
                    x: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: ["视力","听力","言语","肢体","智力","精神","多重"]
                },
                series: [
                    {
                        name: '残疾类别',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: 51.0, name: '视力'},
                            {value: 21.3, name: '听力'},
                            {value: 51.0, name: '言语'},
                            {value: 21.3, name: '肢体'},
                            {value: 51.0, name: '智力'},
                            {value: 21.3, name: '精神'},
                            {value: 21.3, name: '多重'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        cityshow('广东')

        function randomData() {
            return Math.round(Math.random()*1000);
        }
    </script>
<script type="text/html" id="tabledata">
    <table class="table">
        <thead>
        <tr>
            <th>性别</th>
            <th>男</th>
            <th>女</th>
        </tr>
        <tr>
            <th>人数（万人）</th>
            <th>51.0</th>
            <th>24.3</th>
        </tr>
        </thead>
    </table>
</script>
</body>
</html>
